<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>侦听器-watch：监听数据的变化</h1>
    <input type="text" v-model="person.age">
    <p>马老师的年龄：{{person.age}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        age: 18,
        person: {
          age: 69
        }
      },
      // watch: {
      // 函数的方式
      // age是被监听的数据
      //   age(newVal, oldVal) {
      //     console.log('年龄变化了','newVal:',newVal, 'oldVal:',oldVal);
      //     if(newVal>18) {
      //       alert('恭喜！你可以做一些成年人做的事了');
      //     }
      //   }
      // },
      watch: {
        // 对象的方式
        // age是被监听的数据
        age: {
          handler(newVal, oldVal) {
            console.log('newVal:',newVal, 'oldVal:',oldVal);
          }
        },
        person: {
          handler(newVal, oldVal) {
            console.log('偷袭'+newVal.age+'岁的老同志');
            if(newVal.age > 18) {
              console.log('打工人，打工魂，打工人是人上人')
            }
          },
          // 深监听
          deep: true,
          // 立即执行
          immediate: true
        }
      },
    })
  </script>
</body>
</html>